<template>
  <transition name="container">
    <div
      class="login-container"
      ref="logincontainer"
      v-loading="loading"
      v-show="!loading"
    >
      <transition>
        <div class="login-form" v-show="!loading">
          <login-form></login-form>
        </div>
      </transition>
    </div>
  </transition>
</template>
<script>
import loginForm from '../components/login/loginForm.vue'
export default {
  name: 'LoginPage',
  components: { loginForm },
  data() {
    return {
      loading: true
    }
  },
  mounted() {
    document.title = 'Async-Lab - 登录'
    const image = new Image()
    image.src = require('../assets/_DSC6599-compressed.jpg')
    image.onload = () => {
      this.$refs.logincontainer.style.backgroundImage = `url(${image.src})`
      this.loading = false
    }
    image.onerror = () => {
      this.loading = false
      console.log('图片加载失败')
    }
  }
}
</script>

<style scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center bottom;
}
.login-container::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
}
.login-form {
  z-index: 1;
}
.v-enter {
  opacity: 0.6;
  transform: translateY(20px);
}
.v-enter-active {
  transition: all 1s ease;
}

.container-enter {
  opacity: 0.6;
  transform: translateY(20px);
}
.container-enter-active {
  transition: all 1s ease;
}
</style>
